<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GO机网管理后台</title>
    <meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge">
    <link href="../../css/bootstrap.min.css" rel="stylesheet">
    <link href="css/nifty.min.css" rel="stylesheet">
    <link href="../../css/demo/nifty-demo-icons.min.css" rel="stylesheet">
    <link href="../../plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="../../css/user_defined.css" rel="stylesheet">
    <link href="../../plugins/pace/pace.min.css" rel="stylesheet">
    <script src="../../plugins/pace/pace.min.js?2016/8/5"></script>
    <script src="../../js/jquery-2.2.1.min.js"></script>
    <style>
        .phone_name{
            cursor: pointer;
        }
    </style>
</head>

<!--TIPS-->
<!--You may remove all ID or Class names which contain "demo-", they are only used for demonstration. -->

<body id="main">
<div id="container" class="effect mainnav-lg">
    @@include('public/header.html')

    <div class="boxed">

        <!--CONTENT CONTAINER-->
        <!--===================================================-->
        <div id="content-container">

            <!--Page Title-->
            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
            <div id="page-title">
                <h1 class="page-header text-overflow">机型品牌设置</h1>
            </div>
            <!--End page title-->


            <!--Page content-->
            <!--===================================================-->
            <div id="page-content">
                <div id="page-wrapper">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="btn btn-default" data-toggle="modal" data-target="#myModal">添加品牌</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mar-top pad-top pad-all">
                <div class="col-sm-12">
                    <table class="table table-bordered user_t_table" id="table">
                        <thead>
                            <tr>
                                <th style="width: 120px">品牌</th>
                                <th>机型</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="list in getPhoneList">
                                <td>{{list.name}} &nbsp;&nbsp;&nbsp;<i class="fa fa-close pointer del_brand" v-bind:name="list.id"></i></td>
                                <td>
                                    <span class="badge mar-all pad-all phone_name" v-for="li in list.list" v-bind:name="li.phone_id" v-bind:kb="li.name" v-bind:o_sort="li.order_sort">{{li.name}}&nbsp;&nbsp;&nbsp;<i class="fa fa-close pointer del_phone" v-bind:name="li.phone_id"></i></span>
                                    <span class="badge mar-all pad-all pointer add_phone_type" data-toggle="modal" data-target="#add_phone_type" v-bind:name="list.id">+ 添加机型</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!--===================================================-->
            <!--End page content-->


        </div>

        <nav id="mainnav-container">
            @@include('public/left_menu.html')
        </nav>

    </div>


    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">添加品牌</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-3 control-label" for="brandName">品牌名称</label>
                            <div class="col-sm-6">
                                <input type="text" placeholder="" class="form-control input-sm" id="brandName">
                            </div>
                        </div>

                        <div class="login-msg error" id="error1">
                            <i class="fa fa-warning"></i>
                            <p class="error"></p>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="addBrand">确定添加</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

    <!--添加机型modal-->
    <div class="modal fade" id="add_phone_type" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">添加机型</h4>
                </div>
                <div class="modal-body">

                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-3 control-label" for="brandName">机型名称</label>
                            <div class="col-sm-6">
                                <input type="hidden" id="phone_id">
                                <input type="text" placeholder="" class="form-control input-sm" id="phone_type_name">
                            </div>
                        </div>

                        <div class="login-msg error" id="error2">
                            <i class="fa fa-warning"></i>
                            <p class="error"></p>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="add_phone_Type_">确定添加</button>

                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>

    <!--end 添加机型 modal-->

<!--修改机型 start-->
    <div class="modal fade" id="alert_phone" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">修改机型</h4>
                </div>
                <div class="modal-body">

                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-3 control-label" for="brandName">机型名称</label>
                            <div class="col-sm-6">
                                <input type="text" placeholder="" class="form-control input-sm" id="phone_name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label" for="brandName">排序</label>
                            <div class="col-sm-6">
                                <input type="text" placeholder="" class="form-control input-sm" id="order_sort">
                            </div>
                        </div>

                        <div class="login-msg error" id="error3">
                            <i class="fa fa-warning"></i>
                            <p class="error"></p>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="alert_phone_Type_">确定修改</button>

                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!--修改机型 end-->
</div>
@@include('public/footer.html')
<script src="../../plugins/sparkline/jquery.sparkline.min.js"></script>
<script src="../../plugins/vue/vue.min.js"></script>
<script>
    var alert_phone_id;
    var vue = new Vue({
        el:'#main',
        data:{
            getPhoneList:''
        },
        methods:{
            'showPhoneList':function(){
                var that = this;
                $.post('../../index/admin.php?m=Admin&c=Phone&a=getPhoneList',{},function(res){
                    if(res.code==200){
                        that.getPhoneList = res.data;
                    }
                },'json');
            }
        },
        ready:function(){
            this.showPhoneList();
        }
    });



    //添加品牌
    $('#addBrand').click(function(){
        var data = {};
        data.name = $('#brandName').val();
        if(!data.name){
            showError($('#error1'),'请输入手机品牌名字');
            return false;
        }

        $.post('../../index/admin.php?m=Admin&c=Phone&a=addPhoneType',data,function(res){
            if(res.code==200){
                $('#myModal').modal('hide');
                vue.showPhoneList();
            }
        },'json');
    });


    //添加机型
    $('#add_phone_Type_').click(function(){
        var data = {};
        data.name = $('#phone_type_name').val();
        data.id = $('#phone_id').val();
        if(!data.name){
            showError($('#error2'),'请输入机型名字');
            return false;
        }
        $.post('../../index/admin.php?m=Admin&c=Phone&a=addPhone',data,function(data){
            if(data.code==200){
                $('#add_phone_type').modal('hide');
                vue.showPhoneList();
            }
        },'json');
    });

    $('#table').on('click','.add_phone_type',function(){
        var id = $(this).attr('name');
        $('#phone_id').val(id);
    });




    //修改机型1
    $('#table').on('click','.phone_name',function(){
        alert_phone_id = $(this).attr('name');
        $('#phone_name').val($(this).attr('kb'));
        $('#order_sort').val($(this).attr('o_sort'));
        $('#alert_phone').modal('show');
    });

    //修改机型2
    $('#alert_phone_Type_').click(function(){
        var data = {};
        data.name = $('#phone_name').val();
        data.phone_id = alert_phone_id;
        data.order_sort = $('#order_sort').val();
        $.post('../../index/admin.php?m=Admin&c=Phone&a=alterPhone',data,function(data){
            if(data.code==200){
                vue.showPhoneList();
                $('#alert_phone').modal('hide');
                alert('修改成功');
            }
        },'json');
    });


    //删除手机型号
    $('#table').on('click','.del_phone',function(event){
        event.stopPropagation();
        var phone_id = $(this).attr('name');
        bootbox.confirm("是否删除此手机型号", function(result) {
            if (result) {
                var data = {};
                data.phone_id = phone_id;
                $.post('../../index/admin.php?m=Admin&c=Phone&a=delPhone',data,function(data){
                    if(data.code==200){
                        vue.showPhoneList();
                    }
                },'json');
            }else{

            }

        });
    });

    //删除手机品牌
    $('#table').on('click','.del_brand',function(){
        var phone_id = $(this).attr('name');
        bootbox.confirm("是否删除此手机型号", function(result) {
            if (result) {
                var data = {};
                data.id = phone_id;
                $.post('../../index/admin.php?m=Admin&c=Phone&a=delPhoneType',data,function(data){
                    if(data.code==200){
                        vue.showPhoneList();
                    }
                },'json');
            }else{

            }

        });

    });


    function showError(demo,text){
        demo.show().find('p').text(text);
    }
</script>
</body>
</html>
